<template>
<!-- 这里是顶部显示的内容 -->
<div class="header_con">
  <div class="header">
    <h1>手机品牌管理</h1>
    <input type="text"  placeholder="请输入搜索条件"  v-model="chazhao">
  </div>
</div>
<!-- 显示内容的标题部分 -->
<div class="tb_title">
   <h3>品牌列表</h3>
   <a @click.prevent="dianji">新增品牌</a>
</div>
<!-- 显示手机列表信息 -->
<table class="tb">
  <tr>
    <th>编号</th>
    <th>品牌名称</th>
    <th>创立时间</th>
    <th>操作</th>
  </tr>
  <tr v-for="(item,index) in newList" :key="'shouji'+index">
    <td>{{ index + 1 }}</td>
    <td>{{ item.name }}</td>
    <td>{{chulishijian(item.Date)}}</td>
    <td>
      <a @click.prevent="edd(index)" class="del">删除</a>
    </td>
  </tr>
  <tr v-show="newList.length == 0">
    <td colspan="4">没有品牌数据</td>
  </tr>
</table>
<!-- 新增品牌弹框 -->
<div class="add_con" >
  <div class="add" v-show="kaig">
    <h3>新增品牌</h3>
    <div class="add_form">
      <label>品牌名称:</label>
      <input type="text" v-model="xp">          
    </div>
    <div class="btns">
        <input type="button" value="取消" @click="kaig=false">
        <input type="button" value="添加" @click="add">            
    </div>      
  </div>
  <div class="mask" v-show="kaig"></div>
</div>
</template>

<script setup>
// 解构
import { ref,computed } from "vue";
// 商品列表
const shoujilist=ref([
    {
      name:"小米",
      Date:Date.now(),
    },
    {
      name:"红米",
      Date:Date.now(),
    },
    {
      name:"华为",
      Date:Date.now(),
    },
    {
      name:"一加",
      Date:Date.now(),
    },
    {
      name:"oppo",
      Date:Date.now(),
    }
]
    )
// 添加品牌开关
const kaig=ref(false)
// 储存
let xp=ref('')
let chazhao=ref('')
// 新增品牌
const dianji=()=>{
    kaig.value=true
}
// 添加验证
const add=()=>{
  if(xp.value==""){
    return
  }
  shoujilist.value.push({
    name:xp.value,
    Date:Date.now(),
  })
  xp.value=""
  kaig.value=false
}
// 删除
const edd=(index)=>{
  if (confirm("您确定删除吗")) {
    // 删除 index 对应的数据
    shoujilist.value.splice(index, 1);
  }
}
let newList = computed(() => {
  var listarr = [];
  for (let i = 0; i < shoujilist.value.length; i++) {
    if (shoujilist.value[i].name.indexOf(chazhao.value) > -1) {
      listarr.push(shoujilist.value[i]);
    }
  }
  return listarr;
});
// 处理时间
const chulishijian = (time) => {
  let dat = new Date(time);
  var year = dat.getFullYear();
  var mon =dat.getMonth() + 1 < 10 ? "0" + (dat.getMonth() + 1) : dat.getMonth() + 1;
  var data = dat.getDate() < 10 ? "0" + dat.getDate() : dat.getDate();
  var hour = dat.getHours() < 10 ? "0" + dat.getHours() : dat.getHours();
  var min = dat.getMinutes() < 10 ? "0" + dat.getMinutes() : dat.getMinutes();
  var seon = dat.getSeconds() < 10 ? "0" + dat.getSeconds() : dat.getSeconds();
  var newDate =
    year + "-" + mon + "-" + data + " " + hour + ":" + min + ":" + seon;
  return newDate;
};
</script>

<style lang="scss" scoped>
    body {
      margin: 0px;
    }
    .header_con {
      height: 60px;
      background-color: #101010;
      overflow: hidden;
    }
    .header {
      width: 960px;
      margin: 0px auto;
      overflow: hidden;
    }
    .header h1 {
      margin: 0px;
      padding: 0px;
      font-size: 22px;
      line-height: 60px;
      font-weight: normal;
      color: #f1f1f1;
      letter-spacing:1px;
      float: left;
    }
    .header input {
      float: right;
      width: 240px;
      height: 30px;
      text-indent: 10px;
      border-radius: 4px;
      margin-top: 15px;
      border: 0px;
      outline: none;
    }
    .tb_title{
      width:960px;
      height:40px;
      margin:20px auto 0;
      background-color: #3366cc;
      overflow: hidden;
      border-top-left-radius:4px;
      border-top-right-radius:4px;
    }
    .tb_title h3{
      margin:0px;
      padding:0px;
      line-height:40px;
      font-size:16px;
      font-weight:normal;
      text-indent:15px;
      float: left;
      color:#fff;
    }
    .tb_title a{     
      float: right;
      text-decoration:none;
      background-color: #f3cd57;
      color:#2c2203;
      padding:5px 10px;
      font-size:12px;
      border-radius:4px;
      margin:7px 15px 0 0;
    }
    .tb_title a:hover{
      border:1px solid rgba(255,255,255,0.6);
      background-color:transparent;
      color:#fff;
    }
    .tb {
      border-collapse: collapse;
      width: 960px;
      margin: 0 auto;
    }
    .tb th {
      background-color: #f1f1f1;
      color: #333;
      font-size:14px;
    }
    .tb td,
    .tb th {
      padding:10px 0;
      border: 1px solid #999;
      text-align: center;
    }
    .tb td{
      color:#666;
      font-size:14px;
    }
    .del{
      text-decoration:none;
      color:#f90
    }
    .add {
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -200px;
      margin-top: -100px;
      width: 400px;
      height: 200px;
      background-color: #fff;
      border: 1px solid #999;
      border-radius:4px;
      z-index:100;
    }
    .add h3{
      padding:0px;
      margin:0px;
      background-color: #3366cc;
      color:#fff;
      font-size:16px;
      font-weight:normal;
      line-height:40px;
      text-indent:15px;
    }
    .add_form{
      margin:30px 0 0 50px;
    }
    .add_form label{
      font-size:14px;
      padding-right:10px;
    }
    .add_form input{
     width:200px;
     height:24px;
     border:1px solid #ccc;
     outline:none;
     text-indent:10px;
     border-radius:4px;
    }
    .btns{
      border-top:1px solid #ccc;
      margin-top:50px;
      padding-right:10px;
    }
    .btns input{
      width:62px;
      height:30px;
      border:1px solid #dadce0;
      border-radius:4px;
      background-color: #fff;
      float:right;
      margin:10px 10px 0 0;
      outline:none;
      cursor: pointer;;
    }
    .btns input:last-child{
      background-color: #669df6;
      color:#fff;
      border-color:#5793f6;
    }
    .mask{
      position: fixed;
      left:0px;
      top:0px;
      width:100%;
      height:100%;
      background-color: rgba(0,0,0,0.3);
      z-index:99;
    }
</style>